<template>
  <view class="viewport">
    <scroll-view scroll-y>
      <view v-if="addressList.length > 0" class="address">
        <view class="address-list">
          <!-- 收货地址项 -->
          <view>
            <uni-swipe-action>
              <uni-swipe-action-item
                :threshold="0"
                class="item"
                v-for="item in addressList"
                :key="item.id"
                @tap="onChangeAddress(item)"
              >
                <view class="item-content">
                  <view class="user">
                    {{ item.receiver }}
                    <text class="contact">{{ item.contact }}</text>
                    <text class="badge" v-if="item.isDefault == 1">默认</text>
                  </view>
                  <view class="locate"> {{ item.fullLocation }} </view>
                  <!-- 每次点击的时候组织向上冒泡 -->
                  <navigator
                    class="edit"
                    hover-class="none"
                    :url="`/pagesMember/address-form/address-form?id=${item.id}`"
                    @tap.stop="() => {}"
                  >
                    修改
                  </navigator>
                </view>
                <!-- 右侧插槽 -->
                <template #right>
                  <button class="delete-button" @tap="onDeleteAddress(item.id)">删除</button>
                </template>
              </uni-swipe-action-item>
            </uni-swipe-action>
          </view>
        </view>
      </view>
      <view v-else class="blank">暂无收货地址</view>
    </scroll-view>
    <view class="add-btn">
      <navigator hover-class="none" url="/pagesMember/address-form/address-form">
        新建地址
      </navigator>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { AddressItem } from '@/types/address'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getMemberAddressAPI, deleteMemberAddressByIdAPI } from './request'
import { useAddressStore } from '@/stores/modules/address'

// 获取收货地址列表数据
const addressList = ref<AddressItem[]>([])
const getMemberAddressData = async () => {
  const res = await getMemberAddressAPI()
  addressList.value = res.result
}
// 删除地址
const onDeleteAddress = (id) => {
  uni.showModal({
    content: '删除地址？',
    success: async (res) => {
      if (res.confirm) {
        // 根据id删除收货地址
        await deleteMemberAddressByIdAPI(id)
        // 重新获取收货地址列表
        getMemberAddressData()
      }
    },
  })
}
// 选择收货地址
const onChangeAddress = (item: AddressItem) => {
  // 将选择的数据存到pinia中
  const addressStore = useAddressStore()
  addressStore.changeSelectedAddress(item)
  // 返回到上一层页面
  uni.navigateBack()
}
// 每次进入页面就调用一次接口，获取地址详情
onShow(() => {
  getMemberAddressData()
})
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;

  .scroll-view {
    padding-top: 20rpx;
  }
}
.address {
  padding: 0 20rpx;
  margin: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  margin-top: 20rpx;
}
.item-content {
  line-height: 1;
  padding: 40rpx 10rpx 38rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  .edit {
    position: absolute;
    top: 36rpx;
    right: 30rpx;
    padding: 2rpx 0 2rpx 20rpx;
    border-left: 1rpx solid #666;
    font-size: 26rpx;
    color: #666;
    line-height: 1;
  }
}
.item:last-child .item-content {
  border: none;
}
.user {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  color: #333;

  .contact {
    color: #666;
  }
  .badge {
    display: inline-block;
    padding: 4rpx 10rpx 2rpx 14rpx;
    margin: 2rpx 0 0 10rpx;
    font-size: 26rpx;
    color: #27ba9b;
    border-radius: 6rpx;
    border: 1rpx solid #27ba9b;
  }
}
.add-btn {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
.delete-button {
  border-radius: 0;
  height: 164rpx;
  background-color: rgb(220, 6, 6);
  color: white;
  line-height: 164rpx;
  color: white;
}
</style>
<style></style>
